<template>
  <div class="institution">
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple institution-left">
          <tree-page />
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light institution-rigth">
          <el-card class="box-card">
            <div class="el-card__header">
              <div class="clearfix">
                <span>机构信息</span>
              </div>
            </div>
            <div class="el-card__body">
              <div>
                <el-form>
                  <el-row>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item style="margin-left: 30px;" label-width="100px" label="机构编号">
                          <el-input class="el-input-box1" disabled />
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item label-width="100px" label="机构名称">
                          <el-input class="el-input-box1" disabled />
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item label-width="100px" label="机构名称">
                          <el-select v-model="value" disabled class="el-input-box1" placeholder="请选择">
                            <!-- <el-option /> -->
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item style="margin-left: 30px;" label-width="100px" label="机构地址">
                        <el-select v-model="value" class="el-select-rigth" disabled placeholder="请选择省">
                          <!-- <el-option /> -->
                        </el-select>
                        <el-select v-model="value" class="el-select-rigth" disabled placeholder="请选择市">
                          <!-- <el-option /> -->
                        </el-select>
                        <el-select v-model="value" class="el-select-rigth" disabled placeholder="请选择县/区` ">
                          <!-- <el-option /> -->
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item style="margin-left: 30px;" label-width="100px" label="详细地址">
                          <el-input class="el-input-box1" disabled />
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item label-width="100px" label="经度">
                          <el-input class="el-input-box1" disabled />
                          <span class="el-input-span">E</span>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item label-width="100px" label="纬度">
                          <el-input class="el-input-box1" disabled />
                          <span class="el-input-span">N</span>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item style="margin-left: 30px;" label-width="100px" label="机构负责人">
                          <el-input class="el-input-box1" disabled />
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item label-width="100px" label="机构电话">
                          <el-input class="el-input-box1" disabled />
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TreePage from '@/layout/components/TreePage.vue'
export default {
  components: { TreePage },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.institution {
  width: 100%;
  padding: 20px;
  min-height: 870px;
  padding-top: 23px !important;
  .institution-left {
    background-color: #fff;
    height: 792px !important;
    border-radius: 4px;
    width: 214px;
    padding-left: 9px;
  }
  .institution-rigth {
    background-color: #fff;
    border-radius: 4px;
    margin-left: 20px;
    .box-card {
      border: 1px solid #ebeef5;
      background-color: #fff;
      color: #303133;
      transition: 0.3s;
      .el-card__header {
        padding: 25px 20px;
        margin: -20px;
        border-bottom: 1px solid #ebeef5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .el-card__body{
        position: relative;
        padding: 0;
        padding-top: 50px;
        .el-form-item{
          color: black;
          .el-input-box1{
            width: 218px;
            height: 40px;
          }
        }
        .el-select-rigth{
          width: 312px;
          height: 40px;
          padding: 0, 30px, 0, 15px;
          margin-right: 5px;
        }
        .el-input-span{
          position: absolute;
          right: 100px;
          bottom: 0;
        }
      }
    }
  }
}
</style>
